<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue讲解</title>
<link href="./css/base.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div>
    <div class="hd1">参考</div>
    <a href="https://www.runoob.com/vue2/vue-computed.html" target="_blank">Vue.js 计算属性</a>
    <a href="https://baijiahao.baidu.com/s?id=1669186516146275915&wfr=spider&for=pc" target="_blank">Vue中的计算属性</a>
    <a href="https://www.jb51.net/article/231027.htm" target="_blank">Vue中的计算属性介绍</a>
</div>
<div class="H20"></div>


<div id="first">
    
    a: <input class="button" v-model="a"></input>
    b: <input class="button" v-model="b"></input>

    <div>通过computed:计算属性计算</div>
    <div>{{a}}+{{b}}={{ab}}</div>
    <div>{{a}}x{{b}}={{axb}}</div>

    <!-- <div>通过methods计算</div>
    <div>{{a}}+{{b}}={{mab()}}</div>
    <div>{{a}}x{{b}}={{maxb()}}</div> -->


    <div class="H20"></div>
    <div class="row">
        <input class="button" v-model="s1"></input>
        +
        <input class="button" v-model="s2"></input>
        ={{s3}}
    </div>



</div>

<script type="text/javascript">
    new Vue({
        el:'#first',
        data:{
            a:10,
            b:20,
            s1:'hello',
            s2:'world',
        },
        computed:{
            ab(){
                return parseInt(this.a)+parseInt(this.b)
            },
            axb(){
                return parseInt(this.a)*parseInt(this.b)
            },
            s3(){
                return this.s1.toUpperCase()+" "+this.s2.toUpperCase()
            }
        },
        methods:{
            mab(){
                return parseInt(this.a)+parseInt(this.b)
            },
            maxb(){
                return parseInt(this.a)*parseInt(this.b)
            }
        }
    })
</script>
</body>
</html>